<template>
	<view>
		<u-popup :show="pop" :round="10" mode="center" closeable @close="close">
			<view>
				<u-swiper :list="videoSrc" height="480" :autoplay="false"></u-swiper>
				<view class="df" style="margin: 20rpx 26rpx;">
					<u-button style="width:48%;margin:0" type="primary" text="取消预览" @click="close"></u-button>
					<u-button style="width:48%;margin:0" type="success" text="点击下载" @click="save"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "playVideo",
		props: {
			videoList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				videoSrc: [],
				pop: false,
			};
		},
		watch: {
			videoList: {
				handler(newVal) {
					// console.log('cutt', newVal);
					if (newVal.length > 0) {
						this.pop = true
						this.videoSrc = newVal
					}
				},
				immediate: true
			}
		},
		methods: {
			close() {
				this.pop = false;
				this.videoSrc = []
			},
			save() {
				console.log('save');
				uni.showLoading({
					title: '下载中'
				});
				uni.downloadFile({
					url: this.videoSrc[0], //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading();
									console.log('save success');
									uni.showToast({
										title: '保存成功',
										duration: 2000
									});
								},
								fail: (err) => {
									uni.hideLoading();
									console.log('err', err);
									uni.$u.toast('保存失败，请检查是否授权储存权限')
								}
							});
						}
					},
					fail: (err) => {
						console.log('err', err);
						// uni.$u.toast('保存失败，请检查是否授权储存权限')
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	/deep/.u-swiper {
		width: 540rpx;
	}
</style>